<template>
    <view class="container">
        <!-- 余额卡片 -->
        <view class="balance-card">
            <view class="title">账户余额</view>
            <view class="amount">¥{{ walletInfo.balance || '0.00' }}</view>
            <view class="actions">
                <button class="action-btn" @tap="navigateTo('/pages/wallet/recharge')">充值</button>
                <button class="action-btn" @tap="navigateTo('/pages/wallet/withdraw')">提现</button>
            </view>
        </view>

        <!-- 交易记录 -->
        <view class="record-section">
            <view class="section-header">
                <text class="title">交易记录</text>
                <text class="more" @tap="navigateTo('/pages/wallet/record')">查看全部</text>
            </view>
            <view class="record-list">
                <view 
                    class="record-item"
                    v-for="(item, index) in recentRecords"
                    :key="index"
                >
                    <view class="record-info">
                        <text class="type">{{ item.typeText }}</text>
                        <text class="time">{{ item.createTime }}</text>
                    </view>
                    <view 
                        class="amount"
                        :class="{ 'income': item.type === 'income' }"
                    >
                        {{ item.type === 'income' ? '+' : '-' }}¥{{ item.amount }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getWalletInfo, getRecentRecords } from '@/api/wallet'

export default {
    data() {
        return {
            walletInfo: {},
            recentRecords: []
        }
    },
    onShow() {
        this.getWalletInfo()
        this.getRecentRecords()
    },
    methods: {
        async getWalletInfo() {
            try {
                const res = await getWalletInfo()
                this.walletInfo = res
            } catch (error) {
                console.error('获取钱包信息失败', error)
            }
        },
        async getRecentRecords() {
            try {
                const res = await getRecentRecords()
                this.recentRecords = res.map(item => ({
                    ...item,
                    typeText: this.getTypeText(item.type)
                }))
            } catch (error) {
                console.error('获取交易记录失败', error)
            }
        },
        getTypeText(type) {
            const typeMap = {
                'income': '收入',
                'expense': '支出',
                'recharge': '充值',
                'withdraw': '提现'
            }
            return typeMap[type] || type
        },
        navigateTo(url) {
            uni.navigateTo({ url })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
    
    .balance-card {
        background: linear-gradient(135deg, #07c160, #0ab956);
        border-radius: 12rpx;
        padding: 40rpx 30rpx;
        color: #fff;
        
        .title {
            font-size: 28rpx;
            opacity: 0.9;
        }
        
        .amount {
            font-size: 60rpx;
            font-weight: bold;
            margin: 20rpx 0 40rpx;
        }
        
        .actions {
            display: flex;
            gap: 20rpx;
            
            .action-btn {
                flex: 1;
                height: 80rpx;
                line-height: 80rpx;
                background: rgba(255,255,255,0.2);
                border: none;
                color: #fff;
                font-size: 28rpx;
                
                &::after {
                    display: none;
                }
            }
        }
    }
    
    .record-section {
        margin-top: 20rpx;
        background-color: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            
            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }
            
            .more {
                font-size: 24rpx;
                color: #999;
            }
        }
        
        .record-list {
            .record-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20rpx 0;
                
                &:not(:last-child) {
                    border-bottom: 1rpx solid #eee;
                }
                
                .record-info {
                    .type {
                        font-size: 28rpx;
                        color: #333;
                        margin-bottom: 6rpx;
                        display: block;
                    }
                    
                    .time {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
                
                .amount {
                    font-size: 32rpx;
                    color: #333;
                    
                    &.income {
                        color: #07c160;
                    }
                }
            }
        }
    }
}
</style> 